<template>
    <div class="channel" :class="{'main-box': topFix}">
        <div class="top-fixed">
            <header-view :title="title" :back="isSubject"></header-view>
            <div v-show="!isSubject" class="nav-fixed">
                <nav-view></nav-view>
            </div>
        </div>
        <section class="container">
            <div class="mod">
                <channel-item
                    v-for="item in items"
                    :item="item"
                    :index="$index"
                    :cid="cid"
                    :tid="tid"
                    track-by="$index">
                </channel-item>
            </div>
            <we-chat v-show="stopLoad ? false : loading"></we-chat>
        </section>
        <section v-if="adsConfig.lb" class="x-list-bottom">
            <div v-show="showBottomX">
                <ads-block :aid="adsConfig.lb" :jid="cid"></ads-block>
            </div>
        </section>
    </div>
</template>

<script>
import HeaderView from './../module/Header.vue'
import NavView from './../module/Nav.vue'
import ChannelItem from './../module/ChannelItem.vue'
import WeChat from './../module/WeChat.vue'
import store from './../../store'
import scrollHandle from './../../utils/scrollHandle.js'
import utils from './../../utils'
import config from './../../config.js'
import AdsBlock from './../ads/AdsBlock.vue'

export default {
    name: 'Channel',
    components: {
        HeaderView,
        NavView,
        ChannelItem,
        WeChat,
        AdsBlock
    },
    data () {
        return {
            newTitle: '',
            items: [],
            loading: false,
            stopLoad: false,
            isSubject: this.$route.name === 'subject' ? true : false,
            cid: this.$route.params.id,
            tid: this.$route.params.tid || -1,
            title: this.getMainTitle(),
            topFix: this.isSubject ? false : true,
            adsConfig: store.navConfig.adConfig,
            showBottomX: false
        }
    },
    route: {
        data (to) {
            this.cid = Number(this.$route.params.id);
            this.tid = Number(this.$route.params.tid || -1);
            this.isSubject = this.$route.name === 'subject' ? true : false;
            this.title = this.getMainTitle();
            this.stopLoad = false;
            this.topFix = this.isSubject ? false : true;

            this.update();

            setTimeout(function () {
                var scrollTop = store.getScrollTop(this.cid);
                window.scrollTo(0, scrollTop);
            }.bind(this))

        },
        canReuse () {
            console.warn('say hello to my little friend')
        },
        canDeactivate () {
            store.setScrollTop(this.cid)
        }
    },

    methods: {
        loadMore () {
            if(!this.stopLoad){
                this.update(true);
            }
        },
        update (loadMore) {
            var self = this;

            if(loadMore){
                if(this.loading){
                    return;
                }
                this.loading = true;
            }
            let cid = this.$route.params.id;
            let tid = this.$route.params.tid;

            return store.getList(cid, tid, !loadMore).then(items =>{
                this.items = items;
                if(loadMore){
                    this.loading = false;
                }
            }, function(){
                self.loading = false;
                self.stopLoad = true;
            })
        },
        getMainTitle () {
            return this.isSubject ? store.getNavItem(this.cid).n : config.mainTitle
        }
    },
    ready (){
        var self = this;
        var listLoad = function () {
            self.loadMore();
        }

        scrollHandle(listLoad);

        var toTop = false;
        var lastTop = 0;
        var timer;
        var lastTime = Date.now();
        var interval = 150;
        var scrollTop = 0;
        var change = function () {
            self.showBottomX = scrollTop >= lastTop ? true : false;
        }

        window.addEventListener('scroll', function () {
            var now = Date.now();
            scrollTop = document.body.scrollTop;
            if(timer){
                clearTimeout(timer)
            }

            if(now - lastTime >= interval){
                change()
                lastTime = now;
            }else{
                timer = setTimeout(change, interval);
            }

            lastTop = scrollTop;
        })
    }

}
</script>

<style>

    .channel{
        padding-top: 48px;
    }

    .main-box{
        padding-top: 95px;
    }

    .container{
        background-color: #e2e2e2;
    }

    .x-list-bottom{
        position: fixed;
        left: 0;
        bottom: -7px;
        width: 100%;
        z-index: 99999;
    }
</style>